<template>
    <div class="home">
        <!-- <h3>这是主页</h3> -->
        <div class="home-box">
            <div ref="barElement" style="width: 600px;height:400px;"></div>
            <div ref="pieElement" style="width: 600px;height:400px;"></div>
         </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    mounted() {
        this.$nextTick(() => {
            let barElement = this.$refs.barElement;
            let pieElement = this.$refs.pieElement;
            // console.log(barElement);
            if (barElement) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(barElement);
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '文章数量统计'
                    },
                    tooltip: {},
                    xAxis: {
                        data: ['工作生活', '技能学习', '兴趣爱好']
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            data: [5, 20, 36]
                        }
                    ]
                });
            }
            if (pieElement) {
                // 基于准备好的dom，初始化echarts实例
                var myChart2 = echarts.init(pieElement);
                myChart2.setOption({
                    title: {
                        text: '按性别统计用户'
                    },
                    series: [
                        {
                            type: 'pie',
                            data: [
                                {
                                    value: 335,
                                    name: '男生'
                                },
                                {
                                    value: 234,
                                    name: '女生'
                                },
                                {
                                    value: 1548,
                                    name: '未知性别'
                                }
                            ],
                            radius: '50%'
                        }
                    ]
                })
            }
        })

    },
    created(){
        //  console.log(this.$route);
        // this.$store.commit("addTab",this.$route);
    },
    watch: {
        $route: {
            immediate: true,
            deep: true,
            handler(newRoute){
                // console.log(newRoute);
                this.$store.commit("addTab",newRoute);
            }
        }
    }
}

</script>

<style>
.home-box {
    width: 100%;
    display: flex;
    padding: 50px 0px;
}
</style>